<template>
  <div class="address-box">
    <nav-bar class="nav-bar">
      <template v-slot:default> 地址管理 </template>
    </nav-bar>

    <div v-show="list.length == 0" style="margin-top: 200px; text-align: center" >
      还没有地址信息，去添加吧！
    </div>

    <div class="address-item">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
    <!-- <van-button color="#42b983" round block style="width: 350px; margin: 0 auto;">新增地址2</van-button> -->
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import NavBar from "components/common/navbar/NavBar";
import { getAddressList } from "network/address.js";
import { useRoute, useRouter } from "vue-router";
import { Toast } from 'vant';
export default {
  name: 'Address',
  components: {
    NavBar,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      chosenAddressId: '1',
      list: []
    })

    onMounted( async () => {
      // 发起请求，获取地址列表
      Toast.loading('加载中...')
      const data = await getAddressList()
      if (data.data.length === 0) {
        state.list = []
        return
      }
      state.list = data.data.map(item => {
        return {
          id: item.id,
          name: item.name,
          tel: item.phone,
          address: `${item.province}${item.city}${item.county}${item.address}`,
          isDefault: !!item.is_default  // 转成布尔值，再取反
        }
      })
      Toast.clear()
    })

    const onAdd = () =>{
      router.push({path: '/addressedit', query: {type: 'add'}})
    }

    const onEdit = (item) =>{
      router.push({path: '/addressedit', query: {type: 'edit', addressId: item.id}})
    }

    // const select = (item) => {
    //   router.push({path: '/createorder', query: {addressId: item.id}})
    // }


    return {
      ...toRefs(state),
      onAdd,
      onEdit,
      
      // select
    }

  }
  
}
</script>

<style lang="scss">
.address-box {
  height: 300px;
  .van-radio__icon {
    display: none;
  }
  .address-item {
    margin-top: 45px;
    .van-button {
      background: var(--color-tint);
      border-color: var(--color-tint);
    }
  }
}
.van-address-list__bottom {
  bottom: 100px !important;
}
</style>